<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.15rem;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content text-left">
      <h3 class="text-center" style="font-size: 0.25rem">职业危害告知书</h3>

      <div class="text-indent mt-2">
        根据《中华人民共和国职业病防治法》的规定，用人单位在与劳动者订立劳动合同时，应当将工作过程中可能产生的职业危害及其后果、职业病防护措施和待遇等如实告知劳动者。现将您在我单位工作过程中可能产生的职业病危害及其后果、职业病防护措施和待遇如实告知于您，并请您签署。在劳动合同期间，若您的工作岗位发生变化且变更岗位存在职业危害因素时，将重新告知于您，并请您重新签署。
      </div>
      <div class="text-indent">
        （一）所在工作岗位、可能产生的职业病危害、后果及职业病防护措施：
      </div>
      <el-col class="border">
        <el-row class="border-bottom">
          <el-col :span="2" class="border-right center-label font-weight-bold"
            >岗位</el-col
          >
          <el-col
            :span="3"
            class="border-right center-label p-2 font-weight-bold"
          >
            职业病危害因素</el-col
          >
          <el-col
            :span="8"
            class="border-right center-label p-2 font-weight-bold"
            >职业禁忌症</el-col
          >
          <el-col
            :span="3"
            class="border-right center-label p-2 font-weight-bold"
            >可能导致的职业病危害</el-col
          >
          <el-col :span="8" class="center-label p-2 font-weight-bold"
            >职业病防护措施</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="2" class="border-right center-label p-2"
            >{{jobData.jobs||jobData.job}}</el-col
          >
          <el-col :span="3" class="border-right center-label p-2"
            >{{jobData.element}}</el-col
          >
          <el-col :span="8" class="border-right center-label p-2"
            >{{jobData.taboo}}</el-col
          >
          <el-col :span="3" class="border-right center-label p-2"
            >{{jobData.harm}}</el-col
          >
          <el-col :span="8" class="center-label p-2"
            >{{jobData.measure}}</el-col
          >
        </el-row>
      </el-col>

      <div class="text-indent">
        （二）我单位将依照《中华人民共和国职业病防治法》、《职业健康监护技术档案》的要求，做好您上岗前、在岗期间、离岗时的职业健康检查和应急检查。一旦发生职业病，我方将按照国家有关法律、法规的要求，为您如实提供职业病诊断、鉴定所需的劳动职业史和职业病危害接触史、工作场所职业病危害因素检测结果等资料及相应待遇。
      </div>
      <div class="text-indent">
        （三）您应自觉遵守我单位的职业卫生管理制度和操作规程，正确使用和维护职业病防护设施及个人职业病防护用品，积极参加职业卫生教育培训，按要求参加上岗前、在岗期间和离岗时的职业健康检测。若您被检查出职业禁忌症或发现与所从事的职业相关的健康损害的，您必须服从我单位为保护您的职业健康而将您调离原岗位，并妥善安置的工作安排。
      </div>
      <div class="text-indent">
        （四）当您工作岗位或工作内容发生变更，从事告知书中未告知的存在职业病危害的作业时，我方将与您协商变更告知书的相关内容，并重新签订职业病危害告知书。
      </div>
      <div class="text-indent">
        （五）若我方未履行职业病危害告知义务，您有权拒绝从事存在职业病危害的作业，我方不得因此接触与您所订立的劳动合同。
      </div>
      <div class="text-indent">
        （六）职业病危害告知书作为我单位与您签订劳动合同的附件，具有同等的法律效力。
      </div>
      <div class="text-indent">
        （七）若因您不履行如上规定和义务导致您本人或其他人的损害，并进而导致我方承担任何支付赔偿责任的，我方将有权追究您的个人责任。
      </div>

      <div class="d-flex flex-row mt-2 justify-content-between">
        <div>
          <div @click="setUpEquipment('jobForm.announcer','TaskSignFinger')">
            告知者（签字）：
          </div>
          <el-image
            v-show="jobForm.announcer"
            class="sign_img"
            :src="jobForm.announcer"
            fit="fill"
          ></el-image>
          <div>
            <el-input
              v-model="jobForm.year"
              class="people-input"
              placeholder=" "
              style="width: 0.8rem"
            ></el-input>
            年
            <el-input
              v-model="jobForm.month"
              class="people-input"
              placeholder=" "
              style="width: 0.5rem"
            ></el-input>
            月
            <el-input
              v-model="jobForm.day"
              class="people-input"
              placeholder=" "
              style="width: 0.5rem"
            ></el-input>
            日
          </div>
        </div>
        <div>
          <div @click="setUpEquipment('jobForm.announcerd','TaskSignFinger')">
            被告知者（签字）：
          </div>
          <el-image
            v-show="jobForm.announcerd"
            class="sign_img"
            :src="jobForm.announcerd"
            fit="fill"
          ></el-image>
          <div>
            <el-input
              v-model="jobForm.year1"
              class="people-input"
              placeholder=" "
              style="width: 0.8rem"
            ></el-input>
            年
            <el-input
              v-model="jobForm.month1"
              class="people-input"
              placeholder=" "
              style="width: 0.5rem"
            ></el-input>
            月
            <el-input
              v-model="jobForm.day1"
              class="people-input"
              placeholder=" "
              style="width: 0.5rem"
            ></el-input>
            日
          </div>
        </div>
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const jobForm = ref({
            year: "",
            month: "",
            day: "",
            year1: "",
            month1: "",
            day1: "",
            announcer: "", //告知者
            announcerd: "", //被告知者
          });
          const job = ref("厨师");
          const tableData = [
            {
              job: "厨师",
              element: "噪音 高温",
              taboo:
                "1.各种原因引起永久性感音神经性听力损失；2.中度以上传导性耳聋；3. 双耳高频平均听阈≥40dB；4.器质性心脏病；5.未控制的高血压；6.活动性消化性溃疡；7.慢性肾炎；8.未控制的甲亢；9.未控制的糖尿病；10.大面积皮肤疤痕",
              harm: "听力系统损害 中暑",
              measure:
                "（1）在高温环境下采取应加强通风，配备风扇或者空调，饮用清凉饮品等措施防止中暑。（2）减少器皿碰撞。",
            },
            {
              job: "支护工",
              jobs:`1.混凝土工
2.开挖工
3.爆破工
4.支护工
5.模板工
6. 测量工
7.各级管理人员
8.普工
9.钻工
10.木工
11.杂工`,
              element: `粉尘
高温
低温
噪声
有毒有害气体（主要可能涉及硫化氢、一氧化碳）
局部振动（此项主要指混凝土工和钻工）`,
              taboo:`1.活动性肺结核病
2.慢性阻塞性肺病
3.慢性间质性肺病
4.伴肺功能损害的疾病
5.中枢神经系统器质性疾病
6.器质性心脏病
7.心肌病
8.各种原因引起永久性感音神经性听力损失
9.中度以上传导性耳聋
10.双耳高频平均听阈≥40dB
11. 未控制的高血压
12.活动性消化性溃疡
13.慢性肾炎
14.未控制的甲亢
15.未控制糖尿病
16.大面积皮肤疤痕`,
harm:`尘肺
中毒
中暑
冻伤
听力系统损害
职业性手臂振动病（此项主要指混凝土工和钻工）`,
              measure:
                `（1）作业人员应根据现场作业环境，寒冷天气要拿给采取穿戴防寒服、加强保暖等方式，以防止冻伤。高温环境采取加强通风与饮用清凉饮品等措施，防止中暑。
（2）正确佩戴防尘口罩、耳塞、防毒面罩等防护用品。
（3）加强监测，一旦发现超标，立即停止作业，采取措施。`,
            }, {
              job: "开挖工",
              jobs:`1.混凝土工
2.开挖工
3.爆破工
4.支护工
5.模板工
6. 测量工
7.各级管理人员
8.普工
9.钻工
10.木工
11.杂工`,
              element: `粉尘
高温
低温
噪声
有毒有害气体（主要可能涉及硫化氢、一氧化碳）
局部振动（此项主要指混凝土工和钻工）`,
              taboo:`1.活动性肺结核病
2.慢性阻塞性肺病
3.慢性间质性肺病
4.伴肺功能损害的疾病
5.中枢神经系统器质性疾病
6.器质性心脏病
7.心肌病
8.各种原因引起永久性感音神经性听力损失
9.中度以上传导性耳聋
10.双耳高频平均听阈≥40dB
11. 未控制的高血压
12.活动性消化性溃疡
13.慢性肾炎
14.未控制的甲亢
15.未控制糖尿病
16.大面积皮肤疤痕`,
harm:`尘肺
中毒
中暑
冻伤
听力系统损害
职业性手臂振动病（此项主要指混凝土工和钻工）`,
              measure:
                `（1）作业人员应根据现场作业环境，寒冷天气要拿给采取穿戴防寒服、加强保暖等方式，以防止冻伤。高温环境采取加强通风与饮用清凉饮品等措施，防止中暑。
（2）正确佩戴防尘口罩、耳塞、防毒面罩等防护用品。
（3）加强监测，一旦发现超标，立即停止作业，采取措施。`,
            },
            {
              job: "涉爆人员",
              jobs:`1.混凝土工
2.开挖工
3.爆破工
4.支护工
5.模板工
6. 测量工
7.各级管理人员
8.普工
9.钻工
10.木工
11.杂工`,
              element: `粉尘
高温
低温
噪声
有毒有害气体（主要可能涉及硫化氢、一氧化碳）
局部振动（此项主要指混凝土工和钻工）`,
              taboo:`1.活动性肺结核病
2.慢性阻塞性肺病
3.慢性间质性肺病
4.伴肺功能损害的疾病
5.中枢神经系统器质性疾病
6.器质性心脏病
7.心肌病
8.各种原因引起永久性感音神经性听力损失
9.中度以上传导性耳聋
10.双耳高频平均听阈≥40dB
11. 未控制的高血压
12.活动性消化性溃疡
13.慢性肾炎
14.未控制的甲亢
15.未控制糖尿病
16.大面积皮肤疤痕`,
harm:`尘肺
中毒
中暑
冻伤
听力系统损害
职业性手臂振动病（此项主要指混凝土工和钻工）`,
              measure:
                `（1）作业人员应根据现场作业环境，寒冷天气要拿给采取穿戴防寒服、加强保暖等方式，以防止冻伤。高温环境采取加强通风与饮用清凉饮品等措施，防止中暑。
（2）正确佩戴防尘口罩、耳塞、防毒面罩等防护用品。
（3）加强监测，一旦发现超标，立即停止作业，采取措施。`,
            },
						{
						  job: "钢筋工",
						  element: `金属尘
高温
低温
噪声`,
						  taboo:
						    `1.活动性肺结核病
2.慢性阻塞性肺病
3.慢性间质性肺病
4.伴肺功能损害的疾病
5.各种原因引起永久性感音神经性听力损失
6.中度以上传导性耳聋
7. 双耳高频平均听阈≥40dB
8.未控制的高血压
9.器质性心脏病
10.活动性消化性溃疡
11.慢性肾炎
12.未控制的甲亢
13.未控制的糖尿病
14.大面积皮肤疤痕`,
						  harm: `尘肺
中暑
冻伤
听力系统损害`,
						  measure:
						   `（1）作业人员应根据现场作业环境，寒冷天气勇通过穿戴防寒服、加强保暖等措施防止冻伤。高温环境应采取加强通风与饮用清凉饮品等措施，防止中暑。
（2）正确佩戴防尘口罩、耳塞等防护用品。
（3）加强相关职业危害因素监测，一旦超标，立即停止作业，采取措施。`,
						},
						{
						  job: "电工",
						  element: `粉尘
高温
低温
噪声
工频电场
有毒有害气体（主要可能涉及一氧化碳）`,
						  taboo:
						    `1.活动性肺结核病
2.慢性阻塞性肺病
3.慢性间质性肺病
4.伴肺功能损害的疾病
5.中枢神经系统器质性疾病
6.器质性心脏病或各种心律失常
7.心肌病
8.各种原因引起永久性感音神经性听力损失
9.中度以上传导性耳聋
10. 双耳高频平均听阈≥40dB
11. II期和III期高血压
12.活动性消化性溃疡
13.慢性肾炎
14.未控制的甲亢
15.未控制的糖尿病
16.大面积皮肤疤痕
17.癫痫
18.晕厥
19.红绿色盲
20.四肢关节运动功能障碍`,
						  harm: `
							尘肺
							中毒
							中暑
							冻伤
							听力系统损害
							神经衰弱频率增加，心电图出现异常`,
						  measure:
						    `（1）作业人员应根据现场作业环境，寒冷天气要拿给采取穿戴防寒服、加强保暖等方式，以防止冻伤。高温环境采取加强通风与饮用清凉饮品等措施，防止中暑。
（2）正确佩戴防尘口罩、耳塞、防毒面罩等防护用品。
（3）加强监测，一旦发现相关职业危害因素超标，立即停止作业，采取措施。
（4）严格执行电工职业健康安全操作规程。`,
						},
            {
              job: "电焊工",
              element: `电焊烟尘
电弧光辐射
噪音
高温
低温
有毒有害气体（此项主要指洞室开挖中可能产生的一氧化碳、H2S等有毒有害气体，若在作业过程中恰好出现有毒有害气体，则有中毒的可能性）`,
              taboo:
               `1.活动性肺结核病
2.慢性阻塞性肺病
3.慢性间质性肺病
4.伴肺功能损害的疾病
5.中枢神经系统器质性疾病
6.各类精神疾病
7.严重自主神经功能紊乱性疾病
8.各种原因引起永久性感音神经性听力损失
9.中度以上传导性耳聋
10. 双耳高频平均听阈≥40dB
11.器质性心脏病
12.未控制的高血压
13.活动性角膜疾病
14.活动性消化性溃疡
15.慢性肾炎
16.未控制的甲亢
17.未控制的糖尿病
18.大面积皮肤疤痕
19.心肌病`,
                harm: `
                电焊工尘肺
慢性锰中毒
电光性眼炎
电光性皮炎
听力系统损害
中暑
有毒有害气体中毒`,
              measure:
                `（1）作业人员应在通风状况好的场所进行作业，且必须使用相应的防护眼镜、面罩、口罩、手套，绝缘鞋，不能穿短袖衣或卷起袖子。
（2）在寒冷天气应采取保暖措施，在高温环境下采取应加强通风，饮用清凉饮品等措施防止中暑。
（3）加强有关职业危害因素监测，发现超标时，立即停止作业，采取措施。`,
            },
          ];

          const jobData = ref({});

          // onMounted(() => {
          //   jobData.value = tableData.filter(
          //     (item) => item.job == job.value
          //   )[0];
          // });
          
          window.setJob = (event) => {
            job.value = event;
            jobData.value = tableData.filter(
              (item) => item.job == job.value
            )[0];
          };
          window.setSign = (event) => {
            jobForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return jobForm.value;
          };
          window.setData = (data) => {
            jobForm.value = data;
          };

          //peopleForm.sign
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            job,
            jobForm,
            jobData,
            setUpEquipment,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
